<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var get = document.getElementsByClassName("get")[0];
    var post = document.getElementsByClassName("post")[0];

    get.onclick = function () {

        var wd = ""; // 搜索的关键词 (默认 "" => 查询所有数据)
        var col = "id"; // 排序的列名(默认id)
        var type = "asc"; // 排序的方式(默认升序)
        var page = 1;    // 默认显示第一页
        var size = 5;    // 默认每页显示五条

        var xhr = new XMLHttpRequest(); // 0 

        xhr.open("get", `../php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true);  // 1

        xhr.send();

        xhr.onreadystatechange = function () {
            // 2 3 4
            // console.log("请求状态改变", xhr.readyState);

            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                // console.log(result);
                var data = JSON.parse(xhr.responseText);
                console.log(data);
            }

        }
    }


    post.onclick = function () {
        var user = "a123123"; // 'a123123'
        var pwd = "123123";

        if (user && pwd) {
            var xhr = new XMLHttpRequest();

            xhr.open("post", "../php/login.php", true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pwd=${pwd}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        location.href = "./index.html";
                    } else {
                        alert(message);
                    }
                }
            }
        }
    }

</script>

</html>